var cpage = 0;
function era_hot_cate_top3(p) {
    showTableAndEcharts();
    stopColor();
    isFlag = true;

    cpage = p;
    $.ajax({
        method: "POST",
        url: "findEraHotCateTop3ByPage",
        data: {
            page: p
        },
        success: function (data) {
            $("#tip").html("<h3>各年代热门类目Top3表格</h3>");
            $("#echart-tip").html("<h3>各年代热门类目Top3图表</h3>");

            //重置表头
            $("#head-tr").empty();
            //重新添加表头
            $("#head-tr").append("<th>ID</th><th>年份</th><th>类目ID</th><th>类目名</th><th>浏览量</th><th>加入购物车量</th><th>购买量</th>");

            //重置表的数据
            $("tbody").empty();
            var jsonArr = JSON.parse(data);

            //重新加载表格的数据
            eraHotCateTop3Table(jsonArr);

            //加载图表
            eraHotCateTop3Echart();
        }
    })
}

function eraHotCateTop3Table(jsonArr) {
    $.each(jsonArr, function (index, eraHotCate) {
        if (index % 2 == 0) {
            $("tbody").append("<tr class='active'><td>"+eraHotCate.id+"</td><td>"+eraHotCate.era+"</td><td>"
                +eraHotCate.cid+"</td><td>"+eraHotCate.cname+"</td><td>"+eraHotCate.viewCount+
                "</td><td>"+eraHotCate.cartCount+"</td><td>"+eraHotCate.parchaseCount+"</td></tr>")
        } else {
            $("tbody").append("<tr class='info'><td>"+eraHotCate.id+"</td><td>"+eraHotCate.era+"</td><td>"
                +eraHotCate.cid+"</td><td>"+eraHotCate.cname+"</td><td>"+eraHotCate.viewCount+
                "</td><td>"+eraHotCate.cartCount+"</td><td>"+eraHotCate.parchaseCount+"</td></tr>")
        }
    });

    $("tbody tr").on("mouseenter", this, function() {
        color = $(this).attr("class");
        $(this).removeClass(color);
        $(this).addClass("success");
    });
    $("tbody tr").on("mouseleave", this, function() {
        $(this).removeClass("success");
        $(this).addClass(color);
    });

    //循环获取分页的页数
    var pages = 0;
    $.ajax({
        method: "POST",
        url: "getEraHotCateTop3Pages",
        success: function (data) {
            pages = data;

            //添加分组组件
            var page = "<tr><td colspan='7'>";
            page += "<nav aria-label='Page navigation'>";
            page += "<ul class='pagination'>";
            page += "<li>";
            if (cpage > 1) {
                page += "<a href='javascript:era_hot_cate_top3("+(cpage - 1)+")' aria-label='Previous'>";
            } else {
                page += "<a href='javascript:era_hot_cate_top3(1)' aria-label='Previous'>"
            }
            page += "<span aria-hidden='true'>&laquo;</span>";
            page += "</a>";
            page += "</li>";

            for (var i = 1; i<=pages; i++) {
                if (cpage == i) {
                    page += "<li class='active'><a href='javascript:era_hot_cate_top3("+i+")'>"+i+"<span class='sr-only'>(current)</span></a></li>"
                } else {
                    page += "<li><a href='javascript:era_hot_cate_top3("+i+")'>"+i+"</a></li>"
                }
            }

            page += "<li>";

            if (cpage < pages) {
                page += "<a href='javascript:era_hot_cate_top3("+(cpage+1)+")' aria-label='Next'>"
            } else {
                page += "<a href='javascript:era_hot_cate_top3("+pages+")' aria-label='Next'>"
            }

            page += "<span aria-hidden='true'>&raquo;</span>";
            page += "</a>";
            page += "</li>";
            page += "</ul>";
            page += "</nav>";
            page += "</td></tr>";
            $("tbody").append(page);
            $("tbody tr:last-child td").css("text-align", "center")
        }
    });

}

var itemColor = ['#37A2DA',
    '#32C5E9',
    '#67E0E3',
    '#9FE6B8',
    '#FFDB5C',
    '#ff9f7f',
    '#fb7293'
];
function eraHotCateTop3Echart() {

    $.ajax({
        method: "POST",
        url: "findEraHotCateTop3",
        success: function (data) {
            var jsonArr = JSON.parse(data);
            //添加图表对应的容器
            $("#dataEcharts div:gt(0)").remove();
            $("#dataEcharts").append('<div id="main" style="height: 500px;width: 500px;"></div>')
            var chartDom = document.getElementById('main');
            var myChart = echarts.init(chartDom);
            var option;
            var data = [];
            var children = [];
            var i = 0;
            $.each(jsonArr, function(index, hotCate) {
                children.push({
                    name: hotCate.cname,
                    value: 1,
                    itemStyle: {
                        color: itemColor[i]
                    },
                    children: [{
                        name: hotCate.parchaseCount,
                        value: 1,
                        itemStyle: {
                            color: itemColor[i]
                        }
                    }]
                });
                if (index % 3 == 2) { //top1
                    data.push({
                        name: hotCate.era + "后",
                        itemStyle: {
                            color: itemColor[i]
                        },
                        children: children
                    });
                    children = [];
                    i = i + 1;
                }
            });
            option = {
                // grid:{
                //     left:'48%',
                // },
                series: {
                    type: 'sunburst',
                    data: data,
                    levels: [{},
                        {
                            r0: '25%',
                            r: '45%',
                            itemStyle: {
                                borderWidth: 2
                            },
                            label: {
                                rotate: 'tangential'
                            }
                        },
                        {
                            r0: '45%',
                            r: '70%',
                            label: {
                                align: 'right'
                            }
                        },
                        {
                            r0: '70%',
                            r: '72%',
                            label: {
                                position: 'outside',
                                padding: 3,
                                silent: false
                            },
                            itemStyle: {
                                borderWidth: 3
                            }
                        }
                    ]
                }
            };

            option && myChart.setOption(option);
        }
    });

}